<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,Chrome=1">
    <!-- Google Chrome Frame也可以让IE用上Chrome的引擎: -->
    <meta name="renderer" content="webkit">
    <!--国产浏览器高速模式-->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="author" content="穷在闹市"/>
    <!-- 作者 -->
    <meta name="revised" content="穷在闹市.v3, 2019/05/01"/>
    <!-- 定义页面的最新版本 -->
    <meta name="description" content="网站简介"/>
    <!-- 网站简介 -->
    <meta name="keywords" content="搜索关键字，以半角英文逗号隔开"/>
    <title>穷在闹市出品</title>

    <!-- 公共样式 开始 -->
    <link rel="stylesheet" type="text/css" href="../css/base.css">
    <link rel="stylesheet" type="text/css" href="../fonts/iconfont.css">
    <script type="text/javascript" src="../framework/jquery-1.11.3.min.js"></script>
    <link rel="stylesheet" type="text/css" href="../layui/css/layui.css">
    <script type="text/javascript" src="../layui/layui.js"></script>
    <script src="../framework/cframe.js"></script><!-- 仅供所有子页面使用 -->
    <!-- 公共样式 结束 -->

    <!--报表-->
    <script type="text/javascript" src="../framework/echarts.min.js"></script>
    <link rel="stylesheet" type="text/css" href="../css/backHome.css">
    <!--[if lte IE 9]>
          <script src="../framework/html5shiv.min.js"></script>
          <script src="../framework/respond.min.js"></script>
    <![endif]-->
    <script type="text/javascript" src="../js/backHome.js"></script>
</head>

<body>
<div class="cBody" ondragover="fullScreenAllowDrop(event)" ondrop="fullScreenDrop(event, this)">
    <div class="cBody_padding">
        <div class="row">
            <div class="custom_6 totalAmount">
                <div class="type">
                    <span onclick="totalAmountDataRefresh()">近24小时<font class="active"></font></span>
                    <span onclick="totalAmountDataRefresh()">近30天<font></font></span>
                    <span onclick="totalAmountDataRefresh()">近一年<font></font></span>
                </div>
                <div class="title">
                    <i class="iconfont icon-dajiantouzuo" onclick="totalAmountDataRefresh()"></i>
                    <font>总金额</font>
                    <i class="iconfont icon-dajiantouyou" onclick="totalAmountDataRefresh()"></i>
                </div>
                <span class="money"><font>9320,123,056</font>元</span>
                <div id="totalAmount" style="width: 100%; height:100%;"></div>
            </div>
            <div class="custom_6 no_mr weekActive">
                <div class="title">前端周期活跃度</div>
                <div id="weekActive" style="width: 100%; height:100%;"></div>
            </div>
        </div>
        <div class="row m_t">
            <div class="custom_3-5 payRatio">
                <div class="title">支付占比</div>
                <div id="payRatio" style="width: 100%; height:100%;"></div>
            </div>
            <div class="custom_5 orderMap">
                <div class="type">
                    <span onclick="orderMapDataRefresh()">近24小时<font class="active"></font></span>
                    <span onclick="orderMapDataRefresh()">近30天<font></font></span>
                    <span onclick="orderMapDataRefresh()">近一年<font></font></span>
                </div>
                <div class="title">订单分布图</div>
                <div id="orderMap" style="width: 100%; height:100%;"></div>
            </div>
            <div class="custom_3-5 no_mr accountRatio">
                <div class="title">账期比例</div>
                <div class="type">
                    <div><span class="color1"></span><font>账期</font></div>
                    <div><span class="color2"></span><font>总账单数量</font></div>
                    <div><span class="color3"></span><font>总账增长%</font></div>
                    <div><span class="color4"></span><font>总账减少%</font></div>
                </div>
                <div id="accountRatio" style="width: 100%; height:100%;">
                    <div class="top">
								<span>
									<div class="num">20%</div>
									<div class="now" style="height: 20px;"></div>
									<div class="total"></div>
								</span>
                        <span>
									<div class="num">30%</div>
									<div class="now" style="height: 30px;"></div>
									<div class="total"></div>
								</span>
                        <span>
									<div class="num">15%</div>
									<div class="now" style="height: 15px;"></div>
									<div class="total"></div>
								</span>
                        <span>
									<div class="num">25%</div>
									<div class="now" style="height: 25px;"></div>
									<div class="total"></div>
								</span>
                        <span>
									<div class="num">10%</div>
									<div class="now" style="height: 10px;"></div>
									<div class="total"></div>
								</span>
                    </div>
                    <div class="time">
                        <span>24小时</span>
                        <span>7天</span>
                        <span>15天</span>
                        <span>30天</span>
                        <span>30天以上</span>
                    </div>
                    <div class="bottom">
								<span>
									<div class="now just" style="height: 20px;"></div>
								</span>
                        <span>
									<div class="now just" style="height: 30px;"></div>
								</span>
                        <span>
									<div class="now just" style="height: 10px;"></div>
								</span>
                        <span>
									<div class="now just" style="height: 50px;"></div>
								</span>
                        <span>
									<div class="now negative" style="height: 25px;"></div>
								</span>
                    </div>
                </div>
            </div>
        </div>
        <div class="row m_t">
            <div class="custom_8-5 dls_fjzx_sh_TOP5">
                <div class="title">分管-技术-前端 TOP 5</div>
                <div class="type">
                    <span onclick="dls_fjzx_sh_TOP5DataRefresh()">近24小时<font class="active"></font></span>
                    <span onclick="dls_fjzx_sh_TOP5DataRefresh()">近30天<font></font></span>
                    <span onclick="dls_fjzx_sh_TOP5DataRefresh()">近一年<font></font></span>
                    <span onclick="dls_fjzx_sh_TOP5DataRefresh()">历史<font></font></span>
                </div>
                <div id="dls_fjzx_sh_TOP5" style="width: 100%; height:100%;">
                    <div class="smallCustom_4">
                        <div class="t">分管排行TOP5 （万元）</div>
                        <div class="con">
                            <div class="box">
                                <div class="left">
                                    <div class="now" style="width: 100%;"></div>
                                    <div class="text">穷在闹市保定</div>
                                </div>
                                <div class="right">888,999,999</div>
                            </div>
                            <div class="box">
                                <div class="left">
                                    <div class="now" style="width: 95%;"></div>
                                    <div class="text">穷在闹市天津</div>
                                </div>
                                <div class="right">888,999,999</div>
                            </div>
                            <div class="box">
                                <div class="left">
                                    <div class="now" style="width: 90%;"></div>
                                    <div class="text">穷在闹市海南</div>
                                </div>
                                <div class="right">888,999,999</div>
                            </div>
                            <div class="box">
                                <div class="left">
                                    <div class="now" style="width: 84%;"></div>
                                    <div class="text">穷在闹市攀枝花</div>
                                </div>
                                <div class="right">888,999,999</div>
                            </div>
                            <div class="box">
                                <div class="left">
                                    <div class="now" style="width: 78%;"></div>
                                    <div class="text">穷在闹市</div>
                                </div>
                                <div class="right">888,999,999</div>
                            </div>
                        </div>
                    </div>
                    <div class="smallCustom_4 middColor">
                        <div class="t">技术排行TOP5 （元）</div>
                        <div class="con">
                            <div class="box">
                                <div class="left">
                                    <div class="now" style="width: 100%;"></div>
                                    <div class="text">穷在闹市测试</div>
                                </div>
                                <div class="right">888,999,999</div>
                            </div>
                            <div class="box">
                                <div class="left">
                                    <div class="now" style="width: 95%;"></div>
                                    <div class="text">穷在闹市测试</div>
                                </div>
                                <div class="right">888,999,999</div>
                            </div>
                            <div class="box">
                                <div class="left">
                                    <div class="now" style="width: 90%;"></div>
                                    <div class="text">穷在闹市海南</div>
                                </div>
                                <div class="right">888,999,999</div>
                            </div>
                            <div class="box">
                                <div class="left">
                                    <div class="now" style="width: 84%;"></div>
                                    <div class="text">穷在闹市攀枝花</div>
                                </div>
                                <div class="right">888,999,999</div>
                            </div>
                            <div class="box">
                                <div class="left">
                                    <div class="now" style="width: 78%;"></div>
                                    <div class="text">穷在闹市</div>
                                </div>
                                <div class="right">888,999,999</div>
                            </div>
                        </div>
                    </div>
                    <div class="smallCustom_4 no_mr">
                        <div class="t">前端排行TOP5 （元）</div>
                        <div class="con">
                            <div class="box">
                                <div class="left">
                                    <div class="now" style="width: 100%;"></div>
                                    <div class="text">穷在闹市保定</div>
                                </div>
                                <div class="right">888,999,999</div>
                            </div>
                            <div class="box">
                                <div class="left">
                                    <div class="now" style="width: 95%;"></div>
                                    <div class="text">穷在闹市天津</div>
                                </div>
                                <div class="right">888,999,999</div>
                            </div>
                            <div class="box">
                                <div class="left">
                                    <div class="now" style="width: 90%;"></div>
                                    <div class="text">穷在闹市海南</div>
                                </div>
                                <div class="right">888,999,999</div>
                            </div>
                            <div class="box">
                                <div class="left">
                                    <div class="now" style="width: 84%;"></div>
                                    <div class="text">穷在闹市攀枝花</div>
                                </div>
                                <div class="right">888,999,999</div>
                            </div>
                            <div class="box">
                                <div class="left">
                                    <div class="now" style="width: 78%;"></div>
                                    <div class="text">穷在闹市</div>
                                </div>
                                <div class="right">888,999,999</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="custom_3-5 no_mr merchantGraph">
                <div class="title">前端增长图</div>
                <div class="type">
                    <i class="iconfont icon-dajiantouzuo" onclick="merchantGraphDataRefresh()"></i>
                    <font>近30天</font>
                    <i class="iconfont icon-dajiantouyou" onclick="merchantGraphDataRefresh()"></i>
                </div>
                <div id="merchantGraph" style="width: 100%; height:100%;"></div>
            </div>
        </div>
        <div class="row m_t">
            <div class="custom_8-5 categorySingle">
                <div class="title">技术栈与单排占比排行</div>
                <div class="type">
                    <span onclick="categorySingleDataRefresh()">近24小时<font class="active"></font></span>
                    <span onclick="categorySingleDataRefresh()">近30天<font></font></span>
                    <span onclick="categorySingleDataRefresh()">近一年<font></font></span>
                    <span onclick="categorySingleDataRefresh()">历史<font></font></span>
                </div>
                <div class="con">
                    <div id="categorySingle"></div>
                    <div class="top no_mr">
                        <div class="smallCustom_5">
                            <table>
                                <tr>
                                    <th colspan="2" class="tableTitle">类别 TOP 10</th>
                                    <th class="tablePrice">金额（元）</th>
                                </tr>
                                <tr>
                                    <td width="20%">1</td>
                                    <td width="40%">馒头</td>
                                    <td width="40%">100万</td>
                                </tr>
                                <tr>
                                    <td>2</td>
                                    <td>面条</td>
                                    <td>99万</td>
                                </tr>
                                <tr>
                                    <td>3</td>
                                    <td>西瓜</td>
                                    <td>98万</td>
                                </tr>
                                <tr>
                                    <td>4</td>
                                    <td>酱油</td>
                                    <td>50万</td>
                                </tr>
                                <tr>
                                    <td>5</td>
                                    <td>鸡蛋</td>
                                    <td>30万</td>
                                </tr>
                            </table>
                        </div>
                        <div class="smallCustom_5">
                            <table>
                                <tr>
                                    <th colspan="2" class="tableTitle">单品 TOP 10</th>
                                    <th class="tablePrice">金额（元）</th>
                                </tr>
                                <tr>
                                    <td width="20%">1</td>
                                    <td width="40%">馒头</td>
                                    <td width="40%">100万</td>
                                </tr>
                                <tr>
                                    <td>2</td>
                                    <td>面条</td>
                                    <td>99万</td>
                                </tr>
                                <tr>
                                    <td>3</td>
                                    <td>西瓜</td>
                                    <td>98万</td>
                                </tr>
                                <tr>
                                    <td>4</td>
                                    <td>酱油</td>
                                    <td>50万</td>
                                </tr>
                                <tr>
                                    <td>5</td>
                                    <td>鸡蛋</td>
                                    <td>30万</td>
                                </tr>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
            <div class="custom_3-5 no_mr businessData">
                <div class="title">营业数据</div>
                <div id="businessData" style="width: 100%; height:100%;"></div>
            </div>
        </div>
        <div class="h_10"></div>
    </div>

    <!-- 全屏按钮 - 开始 -->
    <i class="iconfont icon-quanping fullScreenBut" onclick="fullScreenClick()" draggable="true"
       ondragstart="fullScreenDrag(event)"></i>
    <!-- 全屏按钮 - 结束 -->
</div>

<script>
    $(function () {
        //总金额
        var totalAmount = [{"2017-09": 225}, {"2017-10": 219}, {"2017-11": 1244}, {"2017-12": 2039}, {"2018-01": 3053}, {"2018-02": 2190}, {"2018-03": 3472}, {"2018-04": 4046}, {"2018-05": 3754}, {"2018-06": 831}, {"2018-07": 165}, {"2018-08": 8}];
        //前端周期活跃度
        var weekActive = [
            [{"00:00": 1000}, {"01:00": 2000}, {"02:00": 3500}, {"03:00": 4600}, {"04:00": 8900}, {"05:00": 7850}],
            [{"00:00": 420}, {"01:00": 1582}, {"02:00": 1734}, {"03:00": 1890}, {"04:00": 2030}, {"05:00": 3910}],
            [{"00:00": 100}, {"01:00": 500}, {"02:00": 820}, {"03:00": 1090}, {"04:00": 1290}, {"05:00": 1510}]
        ];
        //支付占比
        var payRatio = [{"支付宝": 4500611}, {"现金": 5212168}, {"微信": 2321343}];
        //订单分布图
        var orderMap = [
            [{"00:00": 1000}, {"01:00": 2000}, {"02:00": 3500}, {"03:00": 4600}, {"04:00": 8900}, {"05:00": 7850}],
            [{"00:00": 420}, {"01:00": 1582}, {"02:00": 1734}, {"03:00": 1890}, {"04:00": 2030}, {"05:00": 3910}]
        ];
        //前端增长图
        var merchantGraph = [{"2017-09": 225}, {"2017-10": 219}, {"2017-11": 1244}, {"2017-12": 2039}, {"2018-01": 3053}, {"2018-02": 2190}, {"2018-03": 3472}, {"2018-04": 4046}, {"2018-05": 3754}, {"2018-06": 831}, {"2018-07": 165}, {"2018-08": 8}];
        //技术栈与单排占比排行
        var categorySingle = [{"HTML": 1000}, {"前端": 3100}, {"CSS": 3200}, {"Javascript": 3400}, {"Jquery": 4200}, {"C++": 5010}, {"汇编": 1010}, {"ES5": 2010}, {"ES6": 3010}, {"ES7": 4010}];
        //营业数据
        var business = [{"已付款": 1000, "订单数": 1000}, {"未处理订单": 3100, "订单数": 2370}, {"待付款": 3200, "订单数": 3640}]

        init(totalAmount, weekActive, payRatio, orderMap, merchantGraph, categorySingle, business);
    })

    //总金额 - 数据刷新
    function totalAmountDataRefresh() {

        var data = [[{"2018-01": 3053}, {"2018-02": 2190}, {"2018-03": 3472}, {"2018-04": 4046}, {"2018-05": 3754}, {"2018-06": 831}, {"2018-07": 165}, {"2018-08": 165}, {"2018-09": 225}, {"2018-10": 219}, {"2018-11": 1244}, {"2018-12": 2039}]];

        COMPANY_VALUE = "单";
        SPECIFICATION_TAG = "日";
        dataRefresh(totalAmountChart, data);
    }

    //订单分布图 - 数据刷新
    function orderMapDataRefresh() {

        var data = [
            [{"7月15日": 2000}, {"7月16日": 2200}, {"7月17日": 3500}, {"7月18日": 4600}, {"7月19日": 8900}, {"7月20日": 7850}],
            [{"7月15日": 40}, {"7月16日": 582}, {"7月17日": 1691}, {"7月18日": 1734}, {"7月19日": 1890}, {"7月20日": 3910}]
        ];

        dataRefresh(orderMapChart, data);
    }

    //前端增长图 - 数据刷新
    function merchantGraphDataRefresh() {

        var data = [[{"7月25日": 10000}, {"7月26日": 31000}, {"7月27日": 30200}, {"7月28日": 34000}, {"7月29日": 40200}, {"7月30日": 50010}]];

        dataRefresh(merchantGraphChart, data);
    }

    //分管-技术-前端 TOP 5 - 数据刷新
    function dls_fjzx_sh_TOP5DataRefresh() {
        console.log("数据更新");
    }

    //技术栈与单排占比排行 - 数据刷新
    function categorySingleDataRefresh() {

        var data = [[{"HTML": 1000}, {"前端": 3100}, {"CSS": 3200}, {"Javascript": 3400}, {"Jquery": 4200}, {"C++": 5010}, {"汇编": 1010}]];

        dataRefresh(categorySingleChart, data);

        //下面是刷新top排行列表的执行代码
        //....
    }

    //技术栈与单排占比排行 - 点击事件
    function categorySingleClick(obj) {
        //点击事件的执行代码
        //....
        console.log("技术栈与单排占比排行 - 点击事件" + obj.name);
    }
</script>
</body>
</html>